<template>
    <view :style="{ '--color': color, '--back-color': $common.hexToRgba(color, 0.1) }">
        <status-bar :title="title"></status-bar>
        <view class="Box">
            <view class="SearchBox">
                <view class="iconfont icon-btn_search color_99 size42 p-left20 p-right20"></view>
                <input type="text" confirm-type="search" @confirm="Search" @input="Input" class="queryText" v-model="queryText" placeholder="请输入搜索关键词" />
                <view class="searchBtn" @click="Search">搜索</view>
            </view>
        </view>

        <view class="Screening">
            <view class="tabs">
                <u-tabs :list="list1" lineColor="transparent" :itemStyle="itemStyle" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="click"></u-tabs>
            </view>
            <view class="scrobox">
                <!-- <view class="listScr" :class="{ Active: current == 0 }">
                    <text class="Txt">推荐</text>
                </view>
                <view class="listScr">
                    <text class="Txt">高佣</text>
                </view> -->
                <block v-for="(item, index) in screeBox" :key="index">
                    <view class="listScr" @click="changeScree(index)" :class="{ Active: current == index }">
                        <text class="Txt">{{ item.name }}</text>
                        <view class="d-flex f-column m-left8" v-if="index > 1">
                            <view class="iconfont icon-paixu-shang Arrow size20"></view>
                            <view class="iconfont icon-paixu-xia Arrow size20"></view>
                        </view>
                    </view>
                </block>
            </view>
        </view>

        <scroll-view
            scroll-y="true"
            type="custom"
            :scroll-top="scrollTop"
            @scroll="scroll"
            :lower-threshold="100"
            @scrolltolower="scrolltolower"
            class="scrollView"
            :style="scrollStyle"
            v-if="tabs.length"
        >
            <grid-view type="masonry" :cross-axis-count="2" :cross-axis-gap="8" :main-axis-gap="8">
                <view class="list" v-for="(item, index) in tabs" :key="index">
                    <view class="channelVideo">
                        <image :src="item.img" mode="aspectFill" class="wh"></image>
                    </view>
                    <view class="product_name">{{ item.title }}</view>
                    <view class="priceBox">
                        <view class="d-flex a-center color_ff4 bold">
                            <text class="size26 m-top4">￥</text>
                            <text class="size34">{{ item.price }}</text>
                        </view>
                        <view class="spread">去推广</view>
                    </view>
                    <text class="dre">{{ item.dre }}</text>
                    <view class="recommend" v-if="item.recom">
                        <text class="iconfont icon-dianzan_kuai color size32 m-right6"></text>
                        <text class="color_33 size28 bold">推荐理由：</text>
                        <text class="color_66 size24 bold">{{ item.recom }}</text>
                    </view>
                </view>
            </grid-view>
        </scroll-view>

        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2" @showMol="showModal = true"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                showModal: false,
                title: '商品广场',
                queryText: '',
                screeBox: [
                    {
                        name: '推荐'
                    },
                    {
                        name: '高佣'
                    },
                    {
                        name: '价格'
                    }
                ],
                list1: [
                    {
                        name: '生鲜水果'
                    },
                    {
                        name: '生活美食'
                    },
                    {
                        name: '家居百货'
                    },
                    {
                        name: '服饰百货'
                    }
                ],
                tabs: [
                    {
                        img: 'https://wst.wxapp.tc.qq.com/161/20304/snscosdownload/SZ/reserved/685133cd000e44e60993c5dac3ae311e000000a000004f50',
                        name: '送社群',
                        title: '古法炮制 九蒸九晒 食用黑芝麻丸 营养易吸收 270g装',
                        price: 79,
                        recom: '',
                        dre: '省/赚￥0.67'
                    },
                    {
                        img: 'https://store.mp.video.tencent-cloud.com/161/20304/snscosdownload/SH/reserved/67fcd93a000ce7222f9b8b80513f0315000000a000004f50',
                        name: '送朋友',
                        title: '新疆伊犁黑蜂蜜（条蜜便携装15g*10条/盒）',
                        price: 19.9,
                        recom: '吸金纳福,财气随身贴',
                        dre: '省/赚￥0.67'
                    },
                    {
                        img: 'https://wst.wxapp.tc.qq.com/161/20304/snscosdownload/SZ/reserved/685237c300064767099570944b6b8809000000a000004f50',
                        name: '送对象',
                        title: '伊犁黑蜂蜂蜜（拍一发二）',
                        price: 19.9,
                        recom: '吸金纳福,财气随身贴',
                        dre: '省/赚￥0.67'
                    },
                    {
                        img: 'https://wst.wxapp.tc.qq.com/161/20304/snscosdownload/SZ/reserved/685134a5000b05f20996bc0a97688809000000a000004f50',
                        name: '送客户',
                        title: '古法炮制 九蒸九晒 食用黑芝麻丸 营养易吸收 270g装',
                        price: 199,
                        recom: '',
                        dre: '省/赚￥0.67'
                    },
                    {
                        img: 'https://wst.wxapp.tc.qq.com/161/20304/snscosdownload/SZ/reserved/6851311d000db7fe093139d023fd1515000000a000004f50',
                        name: '送长辈',
                        title: '膜玲珑 眼部舒润喷雾',
                        price: 99,
                        recom: '吸金纳福,财气随身贴',
                        dre: '省/赚￥0.67'
                    },
                    {
                        img: 'https://wst.wxapp.tc.qq.com/161/20304/snscosdownload/SZ/reserved/6851328300083d2609a7f5519d5e1815000000a000004f50',
                        name: '送同事',
                        title: '膜玲珑 芙蓉霜',
                        price: 99,
                        recom: '吸金纳福,财气随身贴',
                        dre: '省/赚￥0.67'
                    }
                ],
                current: 0,
                getMore: false,
                scrollTopCope: 0,
                scrollTop: 0,
                pageData: []
            };
        },
        methods: {
            Search() {},
            Input(e) {},
            click(event) {
                console.log(event);
            },
            changeScree(index) {
                this.current = index;
            },
            scrolltolower() {
                if (!this.getMore) return;
                this.page++;
            },
            init() {
                this.page = 1;
                this.getMore = false;
                this.scrollTop = this.scrollTopCope;
                this.$nextTick(() => {
                    this.scrollTop = 0;
                });
            },
            scroll(e) {
                let scrollTop = Math.floor(e.detail.scrollTop);
                this.scrollTopCope = scrollTop;
            }
        },
        computed: {
            ...mapState(['color', 'totalHeight', 'System', 'navHeight', 'navWidth', 'vid']),
            itemStyle() {
                return {
                    padding: '8px 10px'
                };
            },
            inactiveStyle() {
                return {
                    padding: '8rpx 24rpx',
                    backgroundColor: '#f4f6f6',
                    fontSize: '30rpx',
                    color: '#333333',
                    borderRadius: '30rpx'
                };
            },
            activeStyle() {
                return {
                    padding: '8rpx 24rpx',
                    backgroundColor: this.color,
                    fontSize: '30rpx',
                    color: '#fff',
                    borderRadius: '30rpx'
                };
            },
            scrollStyle() {
                let H = this.System.windowHeight - this.totalHeight - 60 - 90;
                return `height: ${H}px`;
            }
        }
    };
</script>

<style>
    page {
        background-color: #f1f1ef;
    }
</style>
<style lang="scss" scoped>
    .Box {
        width: 100%;
        height: 60px;
        background-color: #f1f1ef;
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;

        .SearchBox {
            width: 710rpx;
            height: 88rpx;
            background-color: #fff;
            border-radius: 44rpx;
            display: flex;
            align-items: center;
            margin: 0 auto;
            border: 1px solid var(--color);
            .queryText {
                flex: 1;
                height: 100%;
                font-size: 30rpx;
                color: #000;
            }
            .searchBtn {
                width: 120rpx;
                height: 75%;
                background-color: var(--color);
                font-size: 32rpx;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 30rpx;
                margin-right: 20rpx;
            }
        }
    }

    .Screening {
        width: 100%;
        height: 90px;
        background-color: #fff;

        .tabs {
            width: 100%;
        }
        .scrobox {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            column-gap: 24rpx;

            .listScr {
                height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                .Txt {
                    color: #999;
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .Arrow {
                    color: #999;
                    scale: 0.7;
                    margin-top: 4rpx;
                    line-height: 10rpx;
                }
            }
            .Active {
                .Txt {
                    color: #000;
                }
            }
        }
    }

    .scrollView {
        width: 710rpx;
        margin: 0 auto;
        padding-top: 10rpx;
        box-sizing: border-box;
        .list {
            background-color: #fff;
            display: flex;
            flex-direction: column;
            border-radius: 10rpx;
            overflow: hidden;
            padding-bottom: 20rpx;
            .channelVideo {
                width: 100%;
                height: 350rpx;
                border-radius: 10rpx 10rpx 0 0;
            }
            .product_name {
                padding: 14rpx 10rpx;
                color: #000;
                font-size: 30rpx;
                font-weight: 500;
            }
            .priceBox {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 10rpx;
                .spread {
                    width: 120rpx;
                    height: 50rpx;
                    background-color: var(--color);
                    color: #fff;
                    font-size: 26rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 25rpx;
                    font-weight: 500;
                }
            }
            .dre {
                color: #c08133;
                font-size: 24rpx;
                margin-top: 10rpx;
                margin-left: 10rpx;
                font-weight: 500;
            }
            .recommend {
                padding: 0 10rpx;
                margin-top: 20rpx;
            }
        }
    }
</style>
